<template>
  <div id="app" class="app-page">
    <root>
      <safe-header
        v-bind="{
          title: '成品出库记录',
          isBack: true,
          backIconColor: '#fff',
          fixedTop: true,
        }"
      />

      <div id="RgProdSeedRecord">
        <v-container class="py-6 px-2">
          <v-row class="mt-2">
            <v-col :cols="12" pb-0>
              <v-text-field
                v-model="agreementNo"
                solo
                autofocus
                clearable
                hide-details
                placeholder="请输入履约号查询"
                @keydown.13="codeSearch"
                style="font-size: 14px"
              ></v-text-field>
            </v-col>
          </v-row>
          <v-row class="mt-2">
            <v-col :cols="12" pb-0>
              <v-text-field
                v-model="userName"
                solo
                autofocus
                clearable
                hide-details
                placeholder="请输入确认人"
                style="font-size: 14px"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-container>
        <v-container white class="pa-2 OutboundReview_bottom">
          <v-row>
            <v-col cols="12" class="d-flex align-center">
              <span class="card-title">箱数清单</span>
              <span class="card-title ml-2">
                {{
                rgOutRecords.length == 0 ? "" : ": " + rgOutRecords.length
                }}
              </span>
              &nbsp;&nbsp;
              <v-btn depressed small @click="isCK(1)">已出库</v-btn>&nbsp;&nbsp;
              <v-btn depressed color="primary" small @click="isCK(0)">未出库</v-btn>
            </v-col>
          </v-row>
          <v-divider class="mb-2"></v-divider>
          <div v-if="rgOutRecords[0]">
            <v-container v-for="(item, index) in rgOutRecords" :key="index" class="px-1">
              <v-row>
                <v-col cols="12" class="pa-0 pb-2">
                  <v-card outlined style="background-color: #f2f3f5">
                    <v-card-subtitle class="list_content pa-1">
                      <v-row>
                        <v-col cols="2" class="pr-2 d-flex justify-center align-center">
                          <v-row>
                            <v-col class="pr-2 d-flex justify-center align-center">
                              <span>{{ index + 1 }}</span>
                            </v-col>
                            <v-checkbox
                              v-model="item.isCheck"
                              :disabled="item.isUse"
                              @click="addData(item)"
                            ></v-checkbox>
                          </v-row>
                          <v-divider vertical></v-divider>
                        </v-col>
                        <v-col cols="10">
                          <v-row class="d-flex flex-row justify-space-between wms-v-row">
                            <v-col cols="12" class="card-lable">{{ item.agreementNo }}</v-col>
                          </v-row>
                          <v-row class="d-flex flex-row justify-space-between wms-v-row">
                            <v-col cols="12" class="card-lable">产品规格:{{ item.packingName }}</v-col>
                          </v-row>
                          <v-row class="d-flex flex-row justify-space-between wms-v-row">
                            <v-col cols="12" class="card-lable">物料规格:{{ item.unitName }}</v-col>
                          </v-row>
                          <v-row class="d-flex flex-row justify-space-between wms-v-row">
                            <v-col cols="12" class="card-lable">产品编号:{{ item.status }}</v-col>
                          </v-row>
                          <v-row class="pa-0 d-flex flex-row justify-space-between wms-v-row">
                            <v-col cols="8" class="card-lable">数量:{{ item.qty }}</v-col>
                            <v-col
                              class="card-value"
                            >状态:{{item.status==4000?'出库':(item.status==2000?'检验':(item.status==1000?'生产':'计划'))}}</v-col>
                          </v-row>
                        </v-col>
                      </v-row>
                    </v-card-subtitle>
                  </v-card>
                </v-col>
              </v-row>
            </v-container>
          </div>
          <v-row v-else>
            <v-col cols="12" class="text-center">暂无数据</v-col>
          </v-row>
        </v-container>
        <br />
        <br />
        <div v-show="hidshow" class="footer">
          <v-bottom-navigation height="60" style="background: transparent; box-shadow: none">
            <v-row class="pa-0 ma-0 justify-center" style="background: transparent">
              <v-col
                cols="12"
                class="pa-0 ma-0 d-flex justify-center align-center mb-2 px-2 py-1"
                style="background: transparent"
              >
                <v-btn
                  class="wms-submit-btn"
                  dark
                  block
                  color="#193690"
                  style="
                    height: 100%;
                    border-radius: 10px;
                    color: #fff !important;
                  "
                  @click="OutboundSubmit"
                >提交</v-btn>
              </v-col>
            </v-row>
          </v-bottom-navigation>
        </div>
      </div>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
import SafeHeader from "../../components/safeHeader_wms";
import Root from "@/components/Root.vue";
import { mdiChevronRight, mdiCreditCardScan } from "@mdi/js";
import wms from "@/utils/business_wms";

export default {
  name: "RgProdSeedRecord",
  components: {
    SafeHeader,
    Root
  },
  data() {
    return {
      docmHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      hidshow: true,
      overlay: false,
      alert: false,
      sn: "",
      userName: "",
      svgpath: mdiChevronRight,
      mdiCreditCardScan: mdiCreditCardScan,

      agreementNo: "", // 履约单号
      // 总装箱数据
      rgOutRecords: [
        //ERP装箱数据
        // {
        //   status: "IM21102-918-123", // 状态
        //   packingName: "物料名称", //产品规格
        //   unitName: "x123xx", //物料规格
        //   agreementNo: "220615", //履约号
        //   sn: "ABC1111111", // 产品编号
        //   qty: 110,
        //   isCheck: true,
        // }
      ],
      rgOutRecordList: [],
      // 数据缓存
      rgOutRecordsHC: []
    };
  },

  mounted() {
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
  },

  watch: {
    showHeight: function() {
      if (this.docmHeight > this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
    }
  },

  methods: {
    //查询履约号对应的所有出库任务并进行推荐
    codeSearch() {
      this.overlay = true;
      console.log(this.agreementNo);
      wms
        .get({
          url: "/so/masters/toRgOutRecord",
          data: {
            agreementNo: this.agreementNo
          }
        })
        .then(res => {
          console.log(JSON.stringify(res));
          if (res.status == 200 && res.data.code == 200) {
            //
            this.rgOutRecords = res.data.data;
            console.log(JSON.stringify(this.rgOutRecords));
            this.rgOutRecords.forEach(item => {
              if (item.status != 2000) {
                item.isCheck = true;
                item.isUse = true;
              } else {
                item.isCheck = false;
              }
            });
            this.overlay = false;
          } else {
            alert(res.data.message);
            this.overlay = false;
          }
          this.rgOutRecordsHC = this.rgOutRecords;
        });
    },
    // 未出库
    isCK(val) {
      this.rgOutRecords = [];
      if (val == 1) {
        // 已出库
        this.rgOutRecordsHC.forEach(item => {
          if (item.status == 4000) {
            this.rgOutRecords.push(item);
          }
        });
      } else {
        // 未出库
        this.rgOutRecordsHC.forEach(item => {
          if (item.status != 4000) {
            this.rgOutRecords.push(item);
          }
        });
      }
    },
    addData(data) {
      // 更改选择的状态
      if (data.isCheck == true) {
        for (let i = 0; i < this.rgOutRecords.length; i++) {
          if (data.prodOutRecordId == this.rgOutRecords[i].prodOutRecordId) {
            this.rgOutRecords[i].isCheck = true;
            // 添加元素
            this.rgOutRecordList.push(this.rgOutRecords[i]);
            break;
          } else {
            continue;
          }
        }
      } else {
        for (let i = 0; i < this.rgOutRecords.length; i++) {
          if (data.prodOutRecordId == this.rgOutRecords[i].prodOutRecordId) {
            this.rgOutRecords[i].isCheck = false;
            break;
          } else {
            continue;
          }
        }
        // 删除元素
        for (let i = 0; i < this.rgOutRecordList.length; i++) {
          if (data.prodOutRecordId == this.rgOutRecordList[i].prodOutRecordId) {
            this.rgOutRecordList.splice(i, 1);
            break;
          } else {
            continue;
          }
        }
      }
      console.log(JSON.stringify(this.rgOutRecordList));
    },
    // 提交
    OutboundSubmit() {
      //提交数据
      this.overlay = true;
      console.log(this.rgOutRecordList);
      if (this.userName == null || this.userName == "") {
        alert("请填写K3用户名");
        this.overlay = false;
        return;
      }

      // 没有任何勾选不能提交
      if (this.rgOutRecordList.length == 0) {
        // 没有数据
        alert("请勾选相关数据");
        this.overlay = false;
        return;
      }
      console.log(JSON.stringify(this.rgOutRecordList));
      let ids = [];
      this.rgOutRecordList.forEach(item => {
        ids.push(item.prodOutRecordId);
      });
      let params = {
        ids: ids.toString(),
        userName: this.userName
      };
      wms
        .get({
          url: "/so/masters/TjRgOutRecord",
          data: params
        })
        .then(res => {
          console.log(JSON.stringify(res));
          if (res.status == 200 && res.data.code == 200) {
            this.overlay = false;
            //
            alert("提交成功");
            window.location.reload();
          } else {
            alert(res.data.message);
            this.overlay = false;
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  padding-top: 65px;
  width: 100%;
  bottom: 0;
}

#app {
  .row {
    margin: 0;
  }
  .col {
    padding: 0;
  }
}
#OutboundReview {
  height: 100%;
  display: flex;
  flex-direction: column;
  .OutboundReview_bottom {
    flex: 1;
    padding-bottom: 68px !important;
  }
}
</style>
